<template>
	<view class="pickerBox">
	  
	  <view class="border p-2 w-100 d-block line-h border-box input-defind rounded searchInput"  :class= "isfocus ? 'input-border-color' : ''">
		<input :placeholder='placeholder' v-model="value" @focus='focus' @blur="blur"/>
		<text class="iconfont icon-sousuo input-suffix"  @click='pandleHandle("show")'></text>
	  </view>
	  <view class="pickerPanle" v-if="showPanle">
	    <view class="panle-body" v-if="range.length>0">
	      <view v-for="item in range" :key="item.id" class="panle-item"  @click='pandleHandle("hidden",item)'>
	        <text v-if="leftValue!==''" class="cl-635454">{{item.name}}</text>
	        <text v-if="rightValue!==''" class="cl-c9bebd">{{item.type}}</text>
	      </view>
	    </view> 
	    <view  v-else @click='pandleHandle("hidden")' class="text-center font-md text-light-muted">内容为空</view> 
	  </view>
	  
	</view>

</template>

<script>
	export default {
		data(){
			return {
				showPanle:false,
				isfocus:false
			}
		},
		props:{
			value:{
			  type: String,
			  value: ''
			},
			range:{
			  type: Array,
			  value: []
			},
			placeholder:{
			  type: String,
			  value: ''
			},
			leftValue:{
			  type: String,
			  value: ''
			},
			rightValue: {
			  type: String,
			  value: ''
			}
		},
		methods:{
			pandleHandle(type,value){
			      switch (type){
			        case 'show':
			          this.showPanle= true;
			          this.$emit('getSearchAll', this.value)
			        break;
			        case 'hidden':
			          this.showPanle = false;
			          this.$emit('selectItem', value) 
			        break;
			      }
			    },
				blur(){
					this.isfocus= false;
				},
			    focus(){
			      this.showPanle = true;
				  this.isfocus = true;
			      this.$emit('getSearchAll', this.value);
			    }
		}
	}
</script>

<style scoped>
	.pickerBox{
	  width:100%;
	  position: relative;
	  box-sizing: border-box;
	}
	.pickerBox .pickerPanle{
	  position: absolute;
	  top:90upx;
	  left:0;
	  width:100%;
	  z-index: 10;
	  background: #fff;
	  box-shadow: 0upx 0upx 20upx #bcabab;
	  box-sizing: border-box;
	  padding:32upx;
	}
	.pickerBox .pickerPanle .panle-body{
	  width:100%;
	  max-height:300upx;
	  overflow-y: auto;
	}
	.pickerBox .searchInput{
	  box-sizing: border-box;
	  position: relative;
	  padding-right:70upx
	}
	.pickerBox .pickerPanle .panle-item{
	  font-size: 26upx;
	  line-height: 44upx;
	  display: flex;
	  justify-content: space-between;
	}
	.pickerBox .searchInput .input-suffix{
	  position: absolute;
	  right: 0;
	  top:20upx;
	  width:70upx;
	  text-align: center;
	}
	.pickerBox  .searchInput .input-suffix .icon-sousuo{
	  font-size: 40upx;
	  color:#c9bebd;
	}
	.cl-635454{
	   color:#635454 !important;
	}
	.cl-c9bebd{
	  color:#c9bebd !important;
	}
</style>
